import {
  Children,
  type FC,
} from 'react'
import classNames from 'classnames'
import { withNativeProps } from '../../utils/native-props'
import { SpaceProps } from './type'

const classPrefix = 'rt-space'

export const Space: FC<SpaceProps> = (props) => {
  const {
    align,
    block = false,
    direction = 'horizontal',
    justify,
    onClick,
    wrap = false,
    children,
  } = props
  return withNativeProps(
    props,
    <div
      className={classNames(classPrefix, {
        [`${classPrefix}-block`]: block,
        [`${classPrefix}-wrap`]: wrap,
        [`${classPrefix}-${direction}`]: true,
        [`${classPrefix}-align-${align}`]: !!align,
        [`${classPrefix}-justify-${justify}`]: !!justify,
      })}
      onClick={onClick}
    >
      {Children.map(children, (child) => (
        child !== null
          && child !== undefined && (
          <div className={`${classPrefix}-item`}>{child}</div>
        )
      ))}
    </div>,
  )
}
